<template>
  <div>
    <el-tabs type="border-card" v-model="$route.meta.title">
      <el-tab-pane label="Unicode编码" name="unicode">
        <Unicode/>
      </el-tab-pane>
      <el-tab-pane label="UTF-8编码" name="utf-8">
        <Utf8/>
      </el-tab-pane>
      <el-tab-pane label="URL编码/解码" name="urlencode">
        <Urlencode/>
      </el-tab-pane>
      <el-tab-pane label="Unix时间戳" name="unixtime">
        <Unixtime/>
      </el-tab-pane>
      <el-tab-pane label="Ascii/Native编码互换" name="ascii">Ascii/Native编码互换</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Unicode from '@/components/encode/Unicode'
import Utf8 from '@/components/encode/Utf8'
import Unixtime from '@/components/encode/Unixtime'
import Urlencode from '@/components/encode/Urlencode'

export default {
  name: 'Tools',
  components: { Unicode, Utf8, Unixtime, Urlencode },
  data () {
    return {
      activeName: ''
    }
  },
  created () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-breadcrumb {
  margin: 10px
}
</style>
